import {type ConfigEnv, defineConfig, loadEnv, type UserConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {fileURLToPath} from "node:url";
import path from 'path'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig(({ mode }:ConfigEnv):UserConfig => {
    const root = process.cwd()
    const env = loadEnv(mode, root)
    return {
        root,
        base: './',
        publicDir: fileURLToPath(new URL('./public', import.meta.url)), // 无需处理的静态资源位置
        assetsInclude: fileURLToPath(new URL('./src/assets', import.meta.url)), // 需要处理的静态资源位置
        css:{
            preprocessorOptions:{
                less: {
                    // additionalData: `@import "./src/styles/index.less";`  // 引入全局css变量
                }
            }
        },
        plugins: [
            react(),
            tailwindcss()
        ],
        // 配置别名
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '#': path.resolve(__dirname, './types')
            }
        },
        server: {
            host: true,
            port: 9001,
            open: false,
            cors: true,
            proxy: {
                [env.VITE_BASE_API]: {
                    target: 'http://localhost:9001',
                    // 改变 Host Header
                    changeOrigin: true
                    // 发起请求时将 '/api' 替换为 ''
                    //rewrite: (path) => path.replace(/^\/api/, ""),
                }
            }
        },
        build: {
            // 关闭 sourcemap 报错不会映射到源码
            sourcemap: false,
            // 打包大小超出 400kb 提示警告
            chunkSizeWarningLimit: 400,
            rollupOptions: {
                // 打包入口文件 根目录下的 index.html
                // 也就是项目从哪个文件开始打包
                input: {
                    index: fileURLToPath(new URL('./index.html', import.meta.url))
                },
                treeshake: {
                    preset: 'recommended'
                },
                // 静态资源分类打包
                output: {
                    experimentalMinChunkSize: 20 * 1024,
                    manualChunks: (id: string) => {
                        // if (id.includes('html-canvas')) {
                        //   return 'html-canvas'
                        // } 一个文件打包到一个chunk中 如使用率较低
                        if (id.includes('node_modules')) {
                            return 'vendor'
                        }
                        // return 'index';
                    },
                    chunkFileNames: 'static/js/[name]-[hash].js', // 代码分割后文件名
                    entryFileNames: 'static/js/[name]-[hash:6].js', // 入口文件名
                    assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源文件名
                }
            }
        }
    }
})
